<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            right: 5px;
            bottom: 5px;
            /* display: none; */
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">点击</button></p>

        <my-adver></my-adver>
    </div>
</body>
<script>

    function fn(){

        function a(){
            function b(){

            }

            b();
        }

        a();

    }

    fn();


</script>
<script>
    //  小广告
    //  1. 页面加载完毕 等待5s 小广告显示
    //  2. 倒计时10s后关闭小广告
    //  3. 重复1-2
    //  4. 点击关闭按钮 => 清除小广告  => 重复 1 2 3

    console.dir(Vue)

    // 如何定义组件?   => 组件是可复用的 Vue 实例

    // Vue.component(compName,compOptions)  全局组件
    // compName  => 自定义组件的名称(字符串  -> 复杂名称简易使用中划线命名法)
    // compOptions => 组件相关的配置(也包含 data methods computed watch 生命周期钩子函数 ) 

    // 注意: 
    // 1. data 必须是一个函数
    // 2. (vue2 )单个根元素 => template只能有单个根元素


    // 如何使用组件?
    // 对应组件名称使用组件 => 可以在其他组件中使用对应组件名称(标签名)引入该组件


    // 子组件什么时候会被初始化 => 父组件解析template过程中,遇到子组件=>触发子组件的初始化渲染

    // 根(父)组件先经过初始化阶段 ->进入模板编译阶段 -> 解析template为虚拟DOM -> 此时会解析到子组件(自定义标签) => 触发子组件的初始化 -> 子组件根据option选项内的template生成虚拟dom => 解析为真实DOM(父组件还在等待子组件解析) -> 将解析得到的真实DOM传递给父组件->替换子组件的自定义标签 -> 等所有子组件解析完毕 => 父组件在将虚拟DOM渲染为真实DOM
    

    Vue.component("my-adver",{
        data:function(){
            return {
                isShow:false,
                delayTime:5000,
                countTime:10,   //倒计时时间
                loop:true,
                timeoutTimer:null,
                intervalTimer:null,
            }
        },
        template:`<div class="adver-wrapper" v-if="isShow">
            <div class="adver-header">
                <div class="adver-tips">距离广告关闭还有{{countTime}}秒</div>
                <div class="adver-close" @click="closeHandler">x</div>
            </div>
            <div class="adver-main">
                <a href="">
                    <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
                </a>
            </div>
        </div>`,
        methods: {
            showAdver:function(){
                clearTimeout(this.timeoutTimer);
                this.timeoutTimer = setTimeout(()=>{
                    this.isShow = true;
                    this.intervalTimer = setInterval(()=>{
                        this.countTime --;
                        if(this.countTime <=0){
                            clearInterval(this.intervalTimer);
                            this.countTime = 10;
                            this.isShow = false;
                            if(this.loop){
                                this.showAdver();
                            }
                        }
                    },1000);
                },this.delayTime);
            },
            closeHandler(){
                clearTimeout(this.timeoutTimer);
                clearInterval(this.intervalTimer);
                this.isShow = false;
                this.countTime = 10;
                if(this.loop){
                    this.showAdver();
                }
            }
        },
        beforeCreate() {
            console.log("子组件:1 beforeCreate");
        },
        created() {
            console.log("子组件:2 created");
        },
        beforeMount() {
            console.log("子组件:3 beforeMount");
        },
        mounted(){
            console.log("子组件:4 mounted");
            this.showAdver();
        }
    })
    
    // 根实例 / 根组件 (初始化渲染)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        },
        beforeCreate() {
            console.log("根组件:1 beforeCreate");
        },
        created() {
            console.log("根组件:2 created");
        },
        beforeMount() {
            console.log("根组件:3 beforeMount");
        },
        mounted(){
            console.log("根组件:4 mounted");
        }
    })
   

   

</script>

</html>